<script setup lang="ts">
import { useTestStore } from "@/stores/test";
import type { LangType } from "@/plugins/components/vue-i18n";
import { LangList } from "@/plugins/components/vue-i18n";
const { locale } = useI18n();
const langs: LangType[] = [...LangList];
function handleSubmit(lang: string) {
  localStorage.setItem("app-locale", lang);
  locale.value = lang; // 要切换的语言
}

const Counter = useTestStore();

const isDark = useDark();
const toggleDark = useToggle(isDark);
</script>

<template>
  <div style="text-align: right; padding-right: 20px">
    <router-link to="/">
      <Icon icon="ri-home-3-line" />
      首页
    </router-link>
    | <router-link to="/demo">Demo</router-link> |
    <router-link to="/demo/about">Md页</router-link> |
    <router-link to="/demo/http">请求</router-link> |
    <router-link to="/demo/lang">语言</router-link> |
    <router-link to="/demo/other">另一布局</router-link> |
    <router-link to="/demo/user">会员中心({{ Counter.count }})</router-link> |
    <span class="text-red-400 dark:text-green-400"> 切换语种： </span>
    <span v-for="lang in langs" @click="handleSubmit(lang.value)"
      >[{{ lang.label }}]
    </span>
    <button @click="toggleDark()">
      <Icon v-show="isDark" icon="ic:outline-wb-sunny" />
      <Icon v-show="!isDark" icon="ph:moon-stars-light" />
      <span class="ml-2">{{ isDark ? "Dark" : "Light" }}</span>
    </button>
  </div>
  <RouterView />
</template>

<style scoped>
a.router-link-exact-active {
  color: red;
  text-decoration: underline;
}
</style>
